import { ElSelect, ElOption, ElButton } from 'element-plus';
import { ref } from 'vue';
import { useTableColumns } from '../..';

export interface IDataItem {
  name: string;
  age: string;
  gender: string;
  date: string;
  renderHeader3: string;
}
export const useColumns = () => {
  const genderHeader = ref('1');
  const options = ref([
    {
      label: '男',
      value: '1',
    },
    {
      label: '女',
      value: '0',
    },
    {
      label: '未知',
      value: '-1',
    },
  ]);
  const data = ref<IDataItem[]>([
    {
      name: '<iframe onload=alert(document.location)>',
      age: '12',
      gender: '1',
      date: '2020-12-12 16:00:00',
      renderHeader3: '2020-12-12 16:00:00',
    },
    {
      name: '路人乙',
      age: '10',
      gender: '0',
      date: '2020-12-12 16:00:00',
      renderHeader3: '2020-12-12 16:00:00',
    },
    {
      name: '路人丙',
      age: '13',
      gender: '-1',
      date: '2020-12-12 16:00:00',
      renderHeader3: '2020-12-12 16:00:00',
    },
  ]);
  const { columns } = useTableColumns<IDataItem>(() => [
    {
      label: '名称',
      width: '100px',
      ellipsis: true,
      prop: 'name',
    },
    {
      label: '性别',
      minWidth: '100px',
      prop: 'gender',
      render: (row) => (
        <ElSelect v-model={row.gender}>
          {options.value.map((v) => (
            <ElOption value={v.value} label={v.label} />
          ))}
        </ElSelect>
      ),
      renderHeader: () => (
        <ElSelect v-model={genderHeader.value}>
          {options.value.map((v) => (
            <ElOption value={v.value} label={v.label} key={v.value} />
          ))}
        </ElSelect>
      ),
    },
    {
      label: '性别',
      minWidth: '100px',
      prop: 'renderHeader',
      renderHeader: () => (
        <ElSelect>
          {options.value.map((v) => (
            <ElOption value={v.value} label={v.label} />
          ))}
        </ElSelect>
      ),
      children: [
        {
          label: '性别11',
          minWidth: '100px',
          prop: 'renderHeader3',
          renderHeader: () => (
            <ElSelect>
              {options.value.map((v) => (
                <ElOption value={v.value} label={v.label} />
              ))}
            </ElSelect>
          ),
        },
      ],
    },
    {
      label: '操作',
      minWidth: '100px',
      prop: 'oper',
      renderHeader: () => <ElButton>oper自定义头部</ElButton>,
      render: () => <ElButton>操作</ElButton>,
    },
  ]);
  return {
    columns,
    data,
  };
};
